<template>
  <div>
    <table
      border="1"
      width="700"
      style="border-collapse: collapse"
    >
      <caption>
        购物车
      </caption>
      <thead>
        <tr>
          <th>
            <input type="checkbox" v-model="isAll" /> <span>全选</span>
          </th>
          <th>名称</th>
          <th>价格</th>
          <th>数量</th>
          <th>总价</th>
          <th>操作</th>
        </tr>
        <Hang v-for="(item,index) in  goodList" :key="index"
        :name="item.name"
         :price="item.price"
          :num="item.num"
         :show="goodList"
         :index="index"
         :total='item.total'
         :zong="heji"
         @harry="del"
         @jian="dec"
         @jia="add"
       
        
        />
      </thead>
      <tbody>
        
      </tbody>
      <tfoot>
        <tr>
          <td ><button @click="zongjia">结账</button>{{heji}}</td>
          <td colspan="5">
            
          </td>
        </tr>
      </tfoot>
    </table>
  </div>
</template>

<script>
import Hang from './components/购物车每一行.vue'
import SumHang from './components/购物车合计行.vue'
export default {
    components:{
      Hang,
      SumHang
    },
  data() {
    return {
        show1:'',
   
      heji:0,
     
      goodList: [
        {
          name: "诸葛亮",
          price: 1000,
          num: 0,
          isshow:'',
           total:0,
        },
        {
          name: "蔡文姬",
          price: 1500,
          num: 0,
          isshow:'',
           total:0,
        },
        {
          name: "妲己",
          price: 2000,
          num: 0,
           isshow:'',
           total:0,
        },
        {
          name: "鲁班",
          price: 2200,
          num: 0,
          isshow:'',
           total:0,
        },
      ],
    };
  },
  methods:{
          del(index){
             this.goodList.splice(index,1)
          },
          fn(){

          },
          dec(index){
            if( this.goodList[index].num !==0) {
  this.goodList[index].num  =    this.goodList[index].num - 1
   this.goodList[index].total =   this.goodList[index].num * this.goodList[index].price
            }
       
        //  console.log( this.goodList[digitaa].num);
        //  console.log(1);
          },
          add(index){
         this.goodList[index].num  =    this.goodList[index].num +1
          this.goodList[index].total =   this.goodList[index].num * this.goodList[index].price
        //  console.log(1);
          },
          zongjia(){
                 this.goodList.forEach(item=>{
                        if(item.isshow ===true) {
                           
                        }
                 })
          }
  },
  computed:{
        
           
          isAll:{
               get(){
                return this.goodList.every(item=>item.isshow)
               },
               set(val){
                this.goodList.forEach(item=>item.isshow =val)
               }
          }
  }
};
</script>

<style scoped>
       td {
        width: 220px;
       }
    .AA {
      width: 90px;
    }
      table {
        text-align: center;
        width: 750px;
      }

</style>